·<template>
  <open-modal class="c-pz10000" :openModal='isOpenSubtitleModal' @closeModal='tapCloseModal'>
    <div class="c-bg-white c-pb20 c-br-tr16 c-br-tl16">
      <header class="c-hh80 c-flex-row c-flex-center c-bd-b1 c-p">
        <span class="c-fs28 c-fw-b">字幕显示</span>
        <i @click="tapCloseModal" class="iconfont icon-guanbi c-fs20 c-fc-gray c-pa c-p-t20 c-p-r0 c-ph24"></i>
      </header>
      <section class="c-ph24 c-pt24 c-fs24 c-flex-row c-aligni-center">
        <div>允许显示字幕</div>
        <XSwitch class="c-ml-auto" :themeColor="$getThemeColor()" title="" v-model="isOpenSubtitle" @on-change="handerSwitchChange" />
      </section>
      <div class="c-fs22 c-fc-gray c-mt30 c-ph24">字幕字体大小</div>
      <div @click="tapChangeFont(item.key)" v-for="item in fontSettingList" :key="item.key" class="c-flex-row c-aligni-center c-fs24 c-pv20 c-ph24">
        <span :class="subtitleFont == item.key ? 'theme-fc':''">{{item.name}}</span>
        <i v-if="subtitleFont == item.key" class="iconfont icon-gougou c-fs24 theme-fc c-ml-auto"></i>
      </div>

    </div>
  </open-modal>
</template>
<script>
import OpenModal from "@/components/templates/common/openModal.vue";
import { XSwitch } from 'ckjrweb-mp-ui/src/components/index'
export default {
   components: {
    OpenModal,
    XSwitch
  },
  props: {
    isOpenSubtitleModal: {
      type: Boolean,
      default: false
    },
    openSubtitleSwitch:{
      type: Number,
      default: 1
    },
    subtitleFont: {
      type: String,
      default: 'medium'
    },
  },
  watch:{
    openSubtitleSwitch(val) {
      this.isOpenSubtitle = val == 1
    }
  },
  data() {
    return {
      isOpenSubtitle: true,
      fontSettingList:[{
        key:'large',
        name:'大'
      }, {
        key:'medium',
        name:'中'
      }, {
        key:'small',
        name:'小'
      }]
    };
  },

  methods: {
    tapCloseModal() {
      this.$emit('tapCloseSubtitleModal')
    },
    handerSwitchChange(val) {
      console.log('--handerSwitchChange-', val)
      if (val && this.openSubtitleSwitch == 1) {
        return;
      }
      if (!val && this.openSubtitleSwitch == -1) {
        return;
      }
      this.$emit('changeSubtitleOpen')
    },
    tapChangeFont(curFont) {
      this.$emit('tapChangeFont', curFont);
    },

  },
};
</script>

<style scoped>
</style>
